<template>
	<div class="map">
		<div class="map-top">
			<text @click="all">全部</text>|
			<text @click="fish">鱼塘</text>|
			<text @click="tui">野钓</text>|
			<text @click="more">更多</text>
		</div>
		<div class="map-go" v-if="show">
			<div class="goto">
				<div class="goto-main">
					<text style="font-weight: bold;">{{desc.name}}</text><br>
					<text>{{desc.address}}</text>
				</div>
				<div class="dao">
					<text @click="openMap">导航</text>
				</div>
			</div>
		</div>
		<map :style="{height: nowMapIndex ? nintyPercentScreenHeight : seventyPercentScreenHeight,width:'750rpx'}"
			:latitude="latitude" :longitude="longitude" :markers="markers" @markertap='callouttap'>
		</map>
		<cover-view class="type">
			<cover-view
				style="margin-top: 10%; padding-bottom: 10%; width: 100%;display: block;border-bottom: 1px solid #aaa;">
				<cover-view
					style="display: inline-block;width: 45rpx;height: 15rpx;background-color: red;margin-right: 15rpx;"></cover-view><cover-view style="display: inline-block;">我的位置</cover-view>
			</cover-view>
			<cover-view
				style="margin-top: 10%; padding-bottom: 10%; width: 100%;display: block;border-bottom: 1px solid #aaa;">
				<cover-view
					style="display: inline-block;width: 45rpx;height: 15rpx;background-color: #4685ff;margin-right: 15rpx;"></cover-view><cover-view style="display: inline-block;">鱼塘</cover-view>
			</cover-view>
			<cover-view
				style="margin-top: 10%; padding-bottom: 10%; width: 100%;display: block;border-bottom: 1px solid #aaa;">
				<cover-view
					style="display: inline-block;width: 45rpx;height: 15rpx;background-color: #44ad3a;margin-right: 15rpx;"></cover-view><cover-view style="display: inline-block;">野钓</cover-view>
			</cover-view>
		</cover-view>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				latitude: 38.814604,
				longitude: 115.488968,
				city: '保定市',
				nowMapIndex: true,
				phoneHeight: '', //屏幕高
				phoneWidth: '', //屏幕宽
				desc: {},
				show: false,
				markers: [{
						id: 0,
						width: 30,
						height: 30,
						longitude: 115.488968,
						latitude: 38.814604,
						name: '河北科技学院图书馆',
						address: '保定市 莲池区 贺阳路 b22号',
						type: 1, //当前位置：1；鱼塘：2；推荐点：3
						iconPath: '/static/begin2.png'
					},
					{
						id: 1,
						width: 50,
						height: 50,
						latitude: 38.820254,
						longitude: 115.500659,
						type: 2,
						name:'鱼塘一号',
						address:'河北省保定市莲池区南堤路',
						iconPath: '/static/fish1.png'
					}
				]
			};
		},
		onReady() {
			// 计算屏幕高度 ，宽度
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.phoneHeight = res.windowHeight;
					_this.phoneWidth = res.windowWidth
				}
			});
		},
		computed: {
			nintyPercentScreenHeight() { //百分之九十的屏幕高
				if (this.phoneHeight !== '' && this.phoneWidth !== '') {
					return 750 / (this.phoneWidth) * (this.phoneHeight) * 0.90 + 'rpx'
				} else {
					return '1250rpx'
				}

			},
			seventyPercentScreenHeight() { //百分之七十的屏幕高
				if (this.phoneHeight !== '' && this.phoneWidth !== '') {
					return 750 / (this.phoneWidth) * (this.phoneHeight) * 0.7 + 'rpx'
				} else {
					return '1000rpx'
				}

			},
		},
		mounted() {
			this.getLocation()
			// this.getmarker()
		},
		methods: {
			//获取经纬度
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //获取城市具体地址
					success: (e) => {
						console.log(e);
						this.latitude = e.latitude
						this.longitude = e.longitude
						this.city = e.city
						// this.openMap()
					},
				})
			},
			callouttap(e) {
				this.show = true
				console.log(this.show);
				console.log(e.detail.markerId);
				let arr = this.markers.filter(item => item.id == e.detail.markerId)
				console.log(arr);
				// console.log(arr);
				this.desc = arr[0]
			},
			all() {
				this.show = false
				this.markers = [{
						id: 0,
						width: 30,
						height: 30,
						longitude: 115.488968,
						latitude: 38.814604,
						name: '河北科技学院图书馆',
						address: '保定市 莲池区 贺阳路 b22号',
						type: 1, //当前位置：1；鱼塘：2；推荐点：3
						iconPath: '/static/begin2.png'
					},
					{
						id: 1,
						width: 50,
						height: 50,
						latitude: 38.820254,
						longitude: 115.500659,
						type: 2,
						name:'鱼塘一号',
						address:'河北省保定市莲池区南堤路',
						iconPath: '/static/fish1.png'
					}
				]
				// getmarker()
				console.log(this.markers);
			},
			fish() {
				this.show = false
				let arr = this.markers.filter(item => item.type == 2 || item.type == 1)
				console.log(arr);
				this.markers = arr
			},
			//打开高德地图
			openMap() {
				// console.log(111);
				console.log(this.desc.latitude);
				uni.openLocation({
					latitude: this.desc.latitude,
					longitude: this.desc.longitude,
					name:this.desc.name,
					address: this.desc.address,
					success: function() {
						console.log('success');
					}
				});
			},
			more(){
				// console.log(111);
			}
		}
	};
</script>
<style>
	/* 	.sendbox-top {
		width: 100%;
		height: 100rpx;
		// background-color: #4498F7;
	}

	.sendbox-top text {
		display: inline-block;
		line-height: 100rpx;
		width: 22%;
		text-align: center;
	} */
	.map {
		position: relative;
	}

	.map-top {
		height: 100rpx;
		line-height: 100rpx;
	}

	.map-top text {
		display: inline-block;
		width: 23%;
		text-align: center;
	}

	.type {
		width: 230rpx;
		height: 300rpx;
		background-color: aliceblue;
		z-index: 100;
		position: absolute;
		top: 70%;
		left: 20rpx;
	}

	.type image {
		width: 50rpx;
		height: 50rpx;
		z-index: 1000;
	}

	.map-go {
		height: 220rpx;
		width: 80%;
		background: #fff;
		margin: 0 auto;
		/* position: absolute; */
		top: 15%;
		left: 10%;
	}

	.goto {
		width: 95%;
		height: 100%;
		/* background-color: antiquewhite; */
		margin: 0 auto;
		position: relative;
	}

	.goto-main {
		width: 100%;
		height: 100%;
		position: absolute;
		line-height: 80rpx;
		/* background-color: aqua; */
	}

	.dao {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #4685ff;
		position: absolute;
		left: 85%;
		top: -25%;
		text-align: center;
		line-height: 120rpx;
		color: #fff;
		box-shadow: 0 0 5px 5px #bfd4ff;
	}

	.type text {
		line-height: 100%;
	}
</style>